<template>
  <div class="main">
    <a-layout class="h-full">
      <a-layout-header class="h-10n flex flex-a-c box-border pr-20">
        <div class="flex flex-a-c pl-18">
          <a-image
            width="26"
            class="mr-10"
            :preview="false"
            src="https://images.maishou88.com/admin/buyer_circle_sc/20240402/20240402192035_5045.png"
          />
          <span class="text-size-16">买手云发单PC端 v1.0.0</span>
        </div>
        <div class="flex flex-a-c pl-10n" v-if="userInfo">
          <span class="text-size-14 text666">当前登录买手账号：</span>
          <a-image
            width="20"
            class="mr-6 round-p-50"
            :preview="false"
            :src="
              userInfo.headImgUrl ||
              'https://images.maishoumm.com/uploads/avatar/20210423204707729.jpg'
            "
          />
          <div class="bgead7cd text-size-12 font-bold py-4 px-6">{{ userInfo.rankName }}</div>
          <div class="text-size-14 font-bold ml-4 mr-10">{{ userInfo.nickname }}</div>
          <a-button type="text" class="no-drag" @click="toLogin">
            <template #icon>
              <icon-poweroff />
            </template>
            退出登录
          </a-button>
        </div>
        <div class="ml-auto flex flex-a-c w-25n flex-j-b no-drag">
          <icon-minus size="24" class="text999 cursor-pointer" @click="minimizeWindow" />
          <IconShrink
            size="24"
            class="text999 cursor-pointer"
            @click="fullscreen(false)"
            v-if="isScreen"
          />
          <IconExpand size="24" class="text999 cursor-pointer" @click="fullscreen(true)" v-else />
          <icon-close size="24" class="text999 cursor-pointer" @click="closeApp" />
        </div>
      </a-layout-header>
      <a-layout>
        <a-layout-sider style="width: 190px" class="flex-col box-border pl-24 bg38 m-relative">
          <div class="h-10"></div>
          <div class="no-drag">
            <a-tabs type="text" position="left" :active-key="selectedKey" @change="onTabChange">
              <a-tab-pane :key="1">
                <template #title>
                  <div class="flex flex-a-c">
                    <span class="iconfont icon-shouye text-size-28"></span>
                    <span class="text-size-14 ml-6 pt-4">首页</span>
                  </div>
                </template>
              </a-tab-pane>
              <a-tab-pane :key="2">
                <template #title>
                  <div class="flex flex-a-c">
                    <span class="iconfont icon-jiaosequnti text-size-28"></span>
                    <span class="text-size-14 ml-6 pt-4">源头群</span>
                  </div>
                </template>
              </a-tab-pane>
              <!-- <a-tab-pane :key="3">
                  <template #title>
                    <div class="flex flex-a-c">
                      <span class="iconfont icon-pengyouquan text-size-28"></span>
                      <span class="text-size-14 ml-6 pt-4">源头圈</span>
                    </div>
                  </template>
                </a-tab-pane> -->
              <a-tab-pane :key="3">
                <template #title>
                  <div class="flex flex-a-c">
                    <span class="iconfont icon-qudaofenfaneirongfenfazhongxin text-size-28"></span>
                    <span class="text-size-14 ml-6 pt-4">跟群</span>
                  </div>
                </template>
              </a-tab-pane>
              <!-- <a-tab-pane :key="5">
                  <template #title>
                    <div class="flex flex-a-c">
                      <span class="iconfont icon-fenfa text-size-26"></span>
                      <span class="text-size-14 ml-6 pt-4">跟圈</span>
                    </div>
                  </template>
                </a-tab-pane> -->
              <a-tab-pane :key="4">
                <template #title>
                  <div class="flex flex-a-c">
                    <span class="iconfont icon-lianjieguanlian text-size-26"></span>
                    <span class="text-size-14 ml-6 pt-4">转链</span>
                  </div>
                </template>
              </a-tab-pane>
              <a-tab-pane :key="5">
                <template #title>
                  <div class="flex flex-a-c">
                    <span class="iconfont icon-shezhi- text-size-26"></span>
                    <span class="text-size-14 ml-6 pt-4">设置</span>
                  </div>
                </template>
              </a-tab-pane>
            </a-tabs>
          </div>
        </a-layout-sider>
        <a-layout-content>
          <section class="content flex-1 h-full overflow-hidden box-border">
            <transition name="fade-slide" mode="out-in" appear>
              <keep-alive>
                <component :is="menuList[selectedKey - 1].value"></component>
              </keep-alive>
            </transition>
          </section>
        </a-layout-content>
      </a-layout>
    </a-layout>
  </div>
</template>

<script setup>
import {
  IconSwap,
  IconPoweroff,
  IconMinus,
  IconExpand,
  IconShrink,
  IconClose
} from '@arco-design/web-vue/es/icon'
const { ipcRenderer } = window.electron
import { Modal } from '@arco-design/web-vue'
import MainPage from './MainPage.vue'
import SourceGroup from './sourceGroup/index.vue'
import ChainTransfer from './chainTransfer/index.vue'
import FollowGroup from './followGroup/index.vue'
import SettingPage from './setting/index.vue'
import $bus from '@renderer/common/js/bus'
defineOptions({ name: 'home' })
const selectedKey = ref(1)
const menuList = [
  { name: '首页', value: MainPage },
  { name: '源头群', value: SourceGroup },
  { name: '跟群', value: FollowGroup },
  { name: '转链', value: ChainTransfer },
  { name: '设置', value: SettingPage }
]
const isScreen = ref(false)
const onTabChange = async (e) => {
  if (e == 2 || e == 3) {
    const weixinInfo = await window.ipcRenderer.invoke('storeGet', 'weixinInfo')
    if (!weixinInfo) {
      return Modal.info({
        title: '还未登录微信，现在去登录？',
        hideCancel: false,
        onOk: () => {
          $bus.emit('changeTab', 1)
        }
      })
    }
  }
  selectedKey.value = e
}
const userInfo = ref()
;(async function () {
  userInfo.value = await ipcRenderer.invoke('storeGet', 'userInfo')
})()

// 关闭app
const closeApp = () => {
  Modal.info({
    title: '是否确认退出？',
    hideCancel: false,
    onOk: async () => {
      ipcRenderer.send('appClose')
    }
  })
}

// 窗口最小化
const minimizeWindow = () => {
  ipcRenderer.send('minimizeWindow') // 向主进程发送消息
}

// 窗口全屏切换
const fullscreen = (flag) => {
  isScreen.value = flag
  ipcRenderer.send('toggleFullscreen', flag) // 向主进程发送消息
}

// 点击切换账号
const toLogin = () => {
  Modal.info({
    title: '即将退出当前账号，是否确认？',
    hideCancel: false,
    onOk: async () => {
      ipcRenderer.send('afterOutLogin')
    }
  })
}

// 打印
ipcRenderer.on('print', async (event, res) => {
  console.log(res)
})

onMounted(() => {
  $bus.on('changeTab', (num) => {
    onTabChange(num)
  })
})

onUnmounted(() => {
  $bus.off('changeTab')
})
</script>

<style scope lang="scss">
.main {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.arco-tabs-nav-vertical {
  text-align: left;
}
.arco-tabs-tab-title {
  color: #a6a6a6;
}
.texta6 {
  color: #a6a6a6;
}
.arco-tabs-tab-active .arco-tabs-tab-title {
  color: rgb(var(--primary-6));
}
.arco-tabs-tab-title:hover {
  background: transparent !important;
}
.bgead7cd {
  background-color: #ead7cd;
  border-top-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
.bg38 {
  background-color: rgba(80, 80, 80, 1);
}
.pl-24 {
  padding-left: 24px !important;
}
</style>
